<template>
	<view class="uric-acid-page">

		<!-- Filter Tabs -->
		<view class="filter-tabs">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index"
				:class="{ active: currentTab === index }" @tap="switchTab(index)">
				<text>{{ tab }}</text>
			</view>
		</view>

		<!-- Records List -->
		<scroller @init="initScroller" @down="refreshData" @up="loadMoreData" :up="optUp" :fixed="false">
			<view v-for="(month, monthKey) in groupedRecords" :key="monthKey" class="month-group">
				<view class="month-header">
					<text class="month-title">{{ formatMonth(monthKey) }}</text>
				</view>
				<view class="records-list">
					<view v-for="(record, recordIndex) in month" :key="recordIndex" class="record-item">
						<view class="record-main">
							<text class="record-value">尿酸：{{ record.uricAcid }}μmol/L</text>
							<text style="font-size: 12px;">上传方式：{{ record.sourceName }}</text>
						</view>
						<view class="record-sub">
							<text style="font-size: 12px;">测量时间：{{ record.measuredTime }}</text>
						</view>
						<view class="record-details">
							<text style="font-size: 10px;">上传时间：{{ formatTime(record.measuredTime) }}</text>
						</view>
						<view class="record-status-tag" :style="{ background: record.color }">
							{{ record.tag }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="records.length === 0" class="empty-state">
				<text class="empty-text">暂无尿酸记录</text>
			</view>
		</scroller>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import {
		listUricAcid
	} from '@/api/healthData/everyUricAcid.js'

	export default {
		components: {
			scroller
		},
		data() {
			return {
				name: this.$store.state.user.name,
				userId: this.$store.state.user.userId,
				queryParam: {},
				tabs: ['全部', '异常尿酸', '正常尿酸'],
				dictsList: [],
				currentTab: 0,
				records: [],
				scroller: {},
				optUp: {
					onScroll: true, //监听滚动事件
					page: {
						size: 10 //每页加载10条
					}
				}
			}
		},
		computed: {
			groupedRecords() {
				// 按月份分组记录
				const groups = {}
				this.records.forEach(record => {
					const month = record.measuredTime.substring(0, 7)
					if (!groups[month]) {
						groups[month] = []
					}
					groups[month].push(record)
				})
				return groups
			}
		},
		onShow() {

		},
		onLoad(options) {
			if (options.targetId) {
				this.queryParam.targetId = options.targetId
			}
			if (options.filter) {
				// 根据filter参数设置初始tab
				if (options.filter === 'abnormal') {
					this.currentTab = 1
					this.queryParam.tag = '尿酸'
				}
			}
			this.loadData()
		},
		created() {
			this.$dict.getDicts('uric_acid_type').then(res => {
				this.dictsList = res.data
			})
		},
		methods: {
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},
			/*刷新数据*/
			refreshData() {
				this.loadData()
			},
			/*加载数据*/
			loadData() {
				this.records = [];
				this.scroller.resetUpScroll();
			},
			navigateBack() {
				uni.navigateBack()
			},
			switchTab(index) {
				this.currentTab = index
				if(index===0){
					this.queryParam.tag=''
					this.loadData()
				}else if(index===2){
					this.queryParam.tag='正常'
					this.loadData()
				}else if(index===1){
					this.queryParam.tag='异常'
					this.loadData()
				}
			},
			formatMonth(month) {
				const [year, monthNum] = month.split('-')
				return `${year}年${monthNum}月`
			},
			formatTime(time) {
				return time.replace('-', '年').replace('-', '月').replace(' ', ' ').replace(':', '时') + '分'
			},
			async loadMoreData() {
				this.queryParam.pageNum = this.scroller.num
				this.queryParam.pageSize = this.scroller.size
				this.queryParam.userId = this.userId
				
				const { rows, total } = await listUricAcid(this.queryParam)
				this.records = this.records.concat(rows);
				this.$forceUpdate();
				this.scroller.endBySize(rows.length, total);
				uni.stopPullDownRefresh();
				uni.hideLoading();
			}
		}
	}
</script>

<style>
	.uric-acid-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.back-button {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333;
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.placeholder {
		width: 60rpx;
	}

	.filter-tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 4rpx solid transparent;
	}

	.tab-item.active {
		border-bottom-color: #4cd964;
	}

	.tab-item text {
		font-size: 28rpx;
		color: #666;
	}

	.tab-item.active text {
		color: #4cd964;
		font-weight: 500;
	}

	.records-scroll {
		height: calc(100vh - 200rpx);
	}

	.records-container {
		padding: 20rpx;
	}

	.month-group {
		margin-bottom: 40rpx;
	}

	.month-header {
		padding: 0 0 20rpx 0;
	}

	.month-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		padding-left: 20rpx;
	}


	.record-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		padding-right: 60px;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}

	.record-main {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
		font-size: 14px;
	}

	.record-main .record-value {
		color: #333;
		font-size: 14px;
		font-weight: normal;
	}

	.record-sub {
		display: flex;
		justify-content: space-between;
		color: #666;
		font-size: 14px;
		margin-bottom: 5px;
	}

	.record-details {
		display: flex;
		justify-content: space-between;
		color: #999;
		font-size: 10px;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.record-status-tag {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 13px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		writing-mode: vertical-lr;
		letter-spacing: 2px;
		padding: 10px 0;
	}

	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>
